<template>
	<a
		v-if="isShowA"
		class="uni-link"
		:href="href"
		:class="{
			'uni-link--withline':
				showUnderLine === true || showUnderLine === 'true',
		}"
		:style="{ color, fontSize: fontSize + 'px' }"
		:download="download"
	>
		<slot>{{ text }}</slot>
	</a>
	<!-- #ifndef APP-NVUE -->
	<text
		v-else
		class="uni-link"
		:class="{
			'uni-link--withline':
				showUnderLine === true || showUnderLine === 'true',
		}"
		:style="{ color, fontSize: fontSize + 'px' }"
		@click="openURL"
	>
		<slot>{{ text }}</slot>
	</text>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<text
		v-else
		class="uni-link"
		:class="{
			'uni-link--withline':
				showUnderLine === true || showUnderLine === 'true',
		}"
		:style="{ color, fontSize: fontSize + 'px' }"
		@click="openURL"
	>
		{{ text }}
	</text>
	<!-- #endif -->
</template>

<script>
/**
 * Link 外部网页超链接组件
 * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
 * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
 * @property {String} href 点击后打开的外部网页url
 * @property {String} text 显示的文字
 * @property {String} downlaod H5平台下载文件名
 * @property {Boolean} showUnderLine 是否显示下划线
 * @property {String} copyTips 在小程序端复制链接时显示的提示语
 * @property {String} color 链接文字颜色
 * @property {String} fontSize 链接文字大小
 * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
 */
export default {
	name: 'uniLink',
	props: {
		href: {
			type: String,
			default: '',
		},
		text: {
			type: String,
			default: '',
		},
		download: {
			type: String,
			default: '',
		},
		showUnderLine: {
			type: [Boolean, String],
			default: true,
		},
		copyTips: {
			type: String,
			default: '已自动复制网址，请在手机浏览器里粘贴该网址',
		},
		color: {
			type: String,
			default: '#999999',
		},
		fontSize: {
			type: [Number, String],
			default: 14,
		},
	},
	computed: {
		isShowA() {
			// #ifdef H5
			this._isH5 = true
			// #endif
			if ((this.isMail() || this.isTel()) && this._isH5 === true) {
				return true
			}
			return false
		},
	},
	created() {
		this._isH5 = null
	},
	methods: {
		isMail() {
			return this.href.startsWith('mailto:')
		},
		isTel() {
			return this.href.startsWith('tel:')
		},
		openURL() {
			// #ifdef APP-PLUS
			if (this.isTel()) {
				this.makePhoneCall(this.href.replace('tel:', ''))
			} else {
				plus.runtime.openURL(this.href)
			}
			// #endif
			// #ifdef H5
			window.open(this.href)
			// #endif
			// #ifdef MP
			uni.setClipboardData({
				data: this.href,
			})
			uni.showModal({
				content: this.copyTips,
				showCancel: false,
			})
			// #endif
		},
		makePhoneCall(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber,
			})
		},
	},
}
</script>

<style>
/* #ifndef APP-NVUE */
.uni-link {
	cursor: pointer;
}

/* #endif */
.uni-link--withline {
	text-decoration: underline;
}
</style>
